<!--
 * @Descripttion: 概览
 * @Author: liujing
 * @Date: 2021-07-20 11:11:12
 * @LastEditTime: 2021-07-21 14:09:08
-->
<template>
  <div class="contain">
    <div class="search">
      <div class="box">
        <input
          type="text"
          placeholder="输入区块号、区块哈希、交易号、交易哈希进行查询"
          class="searchInput"
        />
        <button class="searchBtn"></button>
      </div>
    </div>
    <div class="tableBox">
      <el-table
        :data="blockData"
        style="width: 60%"
        class="tableOne"
        stripe
        :header-row-style="headerStyle"
      >
        <el-table-column label="区块列表">
          <el-table-column
            prop="blockNum"
            label="区块高度"
            min-width="120"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="blockPrehash"
            label="前块哈希"
            min-width="200"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="blockCurhash"
            label="当前哈希"
            min-width="200"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="blockGentime"
            label="产生时间"
            min-width="120"
            align="center"
          >
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
    <div class="pageNation">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="100">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import Ajax from '../../apis/ajax'
export default {
  name: 'blockList',
  data () {
    return {
      blockData: []
    }
  },
  mounted () {
    this.getBlockInfo()
  },
  methods: {
    headerStyle () {
      return 'background:#b19577;fontSize:15px'
    },
    getBlockInfo () {
      return Ajax({
        url: '/block/allblock',
        method: 'GET'
      })
        .then(resData => {
          // eslint-disable-next-line eqeqeq
          if (resData.code == 200) {
            this.blockData = resData.data
            // console.log(this.blockData)
          }
        })
        // eslint-disable-next-line handle-callback-err
        .catch(error => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.contain {
  .search {
    height: 80px;
    background-color: #fff;
    margin: 0 auto;
    .box {
      width: 90%;
      height: 40px;
      margin: 0 auto;
      padding-top: 40px;
      display: flex;
      align-items: center;

      .searchInput {
        width: 90%;
        height: 40px;
        border: 1px solid #b19577;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        padding-left: 10px;
      }
      .searchBtn {
        width: 10%;
        height: 40px;
        border: none;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        background: url(../../images/search.png) no-repeat center center;
        background-color: #b19577;
        background-size: 25px;
      }
    }
  }
  .tableBox {
    width: 80%;
    //margin-top: 30px;
    margin: 30px auto;
    display: flex;
  }
  .pageNation {
    float: right;
    margin-top: 10px;
    margin-left: 50px;
  }
}

</style>
